<template>
    <view class="app-container">
        <!-- 顶部个人信息区域 -->
        <view class="profile-header" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="profile-container">
                <!-- 头像 -->
                <view class="avatar-wrapper">
                    <image
                            class="avatar-img"
                            src="https://picsum.photos/100/100?random=user"
                            mode="widthFix"
                            alt="用户头像"
                    ></image>
                    <image
                            v-if="userInfo.vip"
                            class="vip-tag"
                            src="https://picsum.photos/30/30?random=vip"
                            mode="widthFix"
                            alt="VIP标识"
                    ></image>
                </view>

                <!-- 个人信息 -->
                <view class="user-info">
                    <view class="user-name-row">
                        <text class="user-name">{{ userInfo.nickname }}</text>
                        <view
                                class="edit-btn u-f u-f-ac u-f-ajc"
                                size="mini"
                                @click="handleEditProfile"
                        >
                           <image src="/static/img/edit.png"></image>
                        </view>
                    </view>
                    <text class="user-vip-intro">会员可使用高级笔记、专属顾问与优先客服</text>
                    <view class="user-tags">
                        <view class="tag level-tag" :style="{ backgroundColor: levelTagColor }">
                            Lv{{ userInfo.level }}
                        </view>
                        <view class="tag signature-tag">
                            到期时间:2025-11-02(剩余2天)
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 数据统计区域 -->
        <view class="stats-container">
            <view class="stat-item" @click="navigateToPage('/pages/collect/collect')">
                <text class="stat-value">{{ stats.collectCount }}</text>
                <text class="stat-label">我的笔记</text>
            </view>
            <view class="stat-item" @click="navigateToPage('/pages/order/order')">
                <text class="stat-value">{{ stats.orderCount }}</text>
                <text class="stat-label">我的账单</text>
            </view>
            <view class="stat-item" @click="navigateToPage('/pages/coupon/coupon')">
                <text class="stat-value">{{ stats.couponCount }}</text>
                <text class="stat-label">天数</text>
            </view>
            <view class="stat-item" @click="navigateToPage('/pages/points/points')">
                <text class="stat-value">{{ stats.pointsCount }}</text>
                <text class="stat-label">AI对话</text>
            </view>
        </view>

        <!-- 功能菜单区域 -->
        <view class="menu-container">
            <!-- 第一组菜单 -->
            <view class="menu-group">
                <view
                        class="menu-item"
                        v-for="(item, index) in menuGroup1"
                        :key="index"
                        @click="handleMenuClick(item)"
                >
                    <view class="menu-icon" :style="{ backgroundColor: item.color }">
                        <text class="icon-text">{{ item.icon }}</text>
                    </view>
                    <text class="menu-text">{{ item.text }}</text>
                    <text class="menu-intro" :class="handleIntroColor(item.text)">{{ item.intro }}</text>
                    <text class="menu-arrow">→</text>
                </view>
            </view>
        </view>

        <!-- 底部导航栏 -->
        <TabBar
                v-if="curPageStyleInfo.showTabBar !== false"
        />

        <!-- 退出登录按钮 -->
        <view class="logout-container">
            <button
                    class="logout-btn"
                    @click="handleLogout"
                    :loading="isLogoutLoading"
            >
                退出登录
            </button>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { ref, computed, onMounted } from 'vue';
    import {handleGetPageInfo} from "@/utils/utils";
    import TabBar from '@/components/tabBar/index.vue';

    const curPageStyleInfo = ref(handleGetPageInfo().getCurrentStyle())

    // 获取状态栏高度（适配微信小程序）
    const statusBarHeight = ref(0);
    onMounted(() => {
        const systemInfo = uni.getSystemInfoSync();
        statusBarHeight.value = systemInfo.statusBarHeight || 20;
    });

    // 用户信息类型定义
    interface UserInfo {
        nickname: string;
        userId: string;
        level: number;
        vip: boolean;
        signature?: string;
    }

    // 统计数据类型定义
    interface Stats {
        collectCount: number;
        orderCount: number;
        couponCount: number;
        pointsCount: number;
    }

    // 菜单选项类型定义
    interface MenuItem {
        text: string;
        icon: string;
        intro?: string;
        color: string;
        path?: string;
        badge?: string | number;
        onClick?: () => void;
    }

    // 用户信息
    const userInfo = ref<UserInfo>({
        nickname: '小程序用户',
        userId: 'U123456789',
        level: 8,
        vip: true,
        signature: '热爱生活，享受小程序带来的便利'
    });

    // 统计数据
    const stats = ref<Stats>({
        collectCount: 24,
        orderCount: 18,
        couponCount: 5,
        pointsCount: 3580
    });

    // 等级标签颜色（根据等级动态变化）
    const levelTagColor = computed(() => {
        const level = userInfo.value.level;
        if (level >= 10) return '#ff4d4f';
        if (level >= 7) return '#fa8c16';
        if (level >= 4) return '#1890ff';
        return '#52c41a';
    });

    // 功能菜单分组
    const menuGroup1 = ref<MenuItem[]>([
        { text: '会员续费',intro:'续费/升级', icon: '👑', color: '#1890ff', path: '/pages/order/order' },
        { text: '兑换码兑换',intro:'免费福利', icon: '🎁', color: '#ff4d4f', path: '/pages/collect/collect' },
        { text: '主题设置', icon: '🎨', color: '#fa8c16', path: '/pages/coupon/coupon' },
        { text: '账户管理', icon: '👥', color: '#cefadd', path: '/pages/points/points' },
        { text: '欠款管理', icon: '💰', color: '#c9ebfe', path: '/pages/points/points' },
        { text: '清除缓存', icon: '🧹', color: '#fed4d4', path: '/pages/points/points' },
        { text: '关于我们', icon: '📝', color: '#e9ebef', path: '/pages/about/about' }
    ]);

    const handleIntroColor = (text:string)=>{
        if(text=='会员续费'){
            return 'vip'
        }else if(text=='兑换码兑换'){
            return 'gift'
        }else{
            return ''
        }
    }

    // 退出登录加载状态
    const isLogoutLoading = ref(false);

    // 导航到指定页面
    const navigateToPage = (path: string) => {
        uni.navigateTo({ url: path });
    };

    // 处理菜单点击
    const handleMenuClick = (item: MenuItem) => {
        if (item.onClick) {
            item.onClick();
        } else if (item.path) {
            navigateToPage(item.path);
        }
    };

    // 编辑资料
    const handleEditProfile = () => {
        navigateToPage('/pages/profile/edit');
    };

    // 退出登录
    const handleLogout = () => {
        uni.showModal({
            title: '提示',
            content: '确定要退出登录吗？',
            confirmText: '退出',
            cancelText: '取消',
            success: (res) => {
                if (res.confirm) {
                    isLogoutLoading.value = true;
                    // 模拟退出登录请求
                    setTimeout(() => {
                        isLogoutLoading.value = false;
                        uni.showToast({ title: '退出登录成功' });
                        // 跳转到登录页
                        uni.reLaunch({ url: '/pages/login/login' });
                    }, 1000);
                }
            }
        });
    };
</script>

<style lang="less" scoped>
    // 全局变量
    @theme-color: #1890ff;
    @light-gray: #f5f5f5;
    @mid-gray: #e5e5e5;
    @dark-gray: #8c8c8c;
    @text-color: #333333;
    @border-color: #eeeeee;

    .app-container {
        background-color: @light-gray;
        min-height: 100vh;
        padding-bottom: 50px;
    }

    // 顶部个人信息区域
    .profile-header {
        background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
        color: #fff;
        padding-bottom: 20px;

        .profile-container {
            display: flex;
            align-items: center;
            padding: 0 16px;
        }

        .avatar-wrapper {
            position: relative;
            margin-right: 16px;

            .avatar-img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                border: 3px solid rgba(255, 255, 255, 0.8);
            }

            .vip-tag {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                border: 2px solid #fff;
            }
        }

        .user-info {
            flex: 1;

            .user-name-row {
                display: flex;
                align-items: center;
                margin-bottom: 4px;

                .user-name {
                    width:130px;
                    font-size: 20px;
                    font-weight: 600;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-right: 10px;
                }

                .edit-btn {
                    width:25px;
                    height:25px;
                    border-radius:50%!important;
                    color: #fff;
                    /*border-color: rgba(255, 255, 255, 0.8);*/
                    /*background: transparent;*/
                    background-color:#eae7d6;
                    padding:5px;

                    &::after {
                        border-color: rgba(255, 255, 255, 0.8);
                    }
                    image{
                        width:18px;
                        height:18px;
                    }
                }
            }

            .user-vip-intro {
                font-size: 12px;
                color: #FFFFFF;
                margin-bottom: 8px;
                display: block;
            }

            .user-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;

                .tag {
                    font-size: 11px;
                    padding: 2px 8px;
                    border-radius: 12px;
                    background: rgba(255, 255, 255, 0.2);

                    &.level-tag {
                        background: v-bind(levelTagColor);
                        color: #FFFFFF;
                    }

                    &.signature-tag {
                        color:#eef0f5;
                        max-width: 180px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }

    // 数据统计区域
    .stats-container {
        display: flex;
        background-color: #FFFFFF!important;
        margin: 16px;
        border-radius: 12px;
        padding: 16px 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

        .stat-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.95);
            }

            .stat-value {
                font-size: 20px;
                font-weight: 600;
                color: @text-color;
                margin-bottom: 4px;
            }

            .stat-label {
                font-size: 12px;
                color: @dark-gray;
            }
        }
    }

    // 功能菜单区域
    .menu-container {
        margin: 0 16px;

        .menu-group {
            background-color: #fff;
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

            .menu-item {
                display: flex;
                align-items: center;
                padding: 0 16px;
                height: 50px;
                border-bottom: 1px solid @border-color;
                cursor: pointer;
                transition: background-color 0.2s ease;

                &:last-child {
                    border-bottom: none;
                }

                &:active {
                    background-color: @light-gray;
                }

                .menu-icon {
                    width: 36px;
                    height: 36px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 12px;

                    .icon-text {
                        font-size: 18px;
                        color: #fff;
                    }
                }

                .menu-text {
                    flex: 1;
                    font-size: 16px;
                    color: @text-color;
                }
                .menu-intro {
                    font-weight: bold;
                    margin-right: 3px;
                    font-size: 12px;
                    color: @text-color;
                }
                .vip {
                    color:#20a752;
                }

                .gift {
                    color:#d97706;
                }

                .menu-arrow {
                    font-size: 12px;
                    color: @dark-gray;
                }

                .menu-badge {
                    margin-left: 8px;
                    padding: 1px 6px;
                    background-color: #ff4d4f;
                    color: #fff;
                    font-size: 11px;
                    border-radius: 10px;
                    min-width: 16px;
                    text-align: center;
                }
            }
        }
    }

    // 退出登录按钮
    .logout-container {
        display: flex;
        justify-content: center;
        margin: 24px 16px 0;

        .logout-btn {
            width: 100%;
            height: 44px;
            background-color: #fff;
            color: #ff4d4f;
            border: 1px solid #ff4d4f;
            border-radius: 22px;
            font-size: 16px;

            &::after {
                border: none;
                border-radius: 22px;
            }

            &:active {
                background-color: rgba(255, 77, 79, 0.1);
            }
        }
    }

    // 微信小程序适配
    ::v-deep(.uni-btn) {
        &.edit-btn {
            border-radius: 14px !important;
        }
    }

</style>
